axios.get('/student/overview').then(result => {
    let { code, message, data: { total, avgSalary, avgAge, proportion } } = result.data
    // 找到页面元素，设置text文本值
    if (code === 0) {
        $('.total').text(total);
        $('.avgSalary').text(avgSalary);
        $('.avgAge').text(avgAge);
        $('.proportion').text(proportion);
    }
})


$('.bar .btn').on('click', function () {
    $('#batch').toggle()
})
$('#batch > li').on('click', function () {
    let index = $(this).index()
    let batch = index + 1
    axios.get('/score/batch', { params: { batch } }).then(result => {
        if (result.data.code === 0) {
            scoreChaart(result.data.data);
        }
    })
})

$('#batch > li').eq(0).trigger('click')

//  获取全部学员信息
axios.get('/student/list').then(result => {
    let { code, data } = result.data
    if (code === 0) {
        let lineName = []
        let salary = []
        let trueSalary = []
        let chinaGeoCoordMap = { '北京市': [116.4551, 40.2539] }
        let chinaDatas = []
        let pie = []


        data.forEach(item => {
            lineName.push(item.name)
            salary.push(item.salary)
            trueSalary.push(item.truesalary)
            console.log(item);
            let sheng = item.province
            chinaGeoCoordMap[sheng] = [item.jing, item.wei]
            chinaDatas.push([{
                name: sheng,
                value: 0
            }])

            let index = pie.findIndex(v => v.name === item.province)
            if (index !== -1) {
                pie[index].value++
            } else {
                pie.push({ name: item.province, value: 1 })
            }
        })
        lineChaart(lineName, salary, trueSalary)
        mapChaart(chinaGeoCoordMap, chinaDatas)
        paiChaart(pie)
    }
})


//饼图
function paiChaart(pie) {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init($('.pie')[0]);

    // 指定图表的配置项和数据
    let option = {
        title: {
            text: "籍贯 ",
            textStyle: {
                color: "#6d767e"
            },
        },
        tooltip: {
            formatter: '{a} <br /> {b} <strong>{c}</strong>人 占比{d}%'
        },

        series: [
            {
                name: '各地人员分布',
                type: 'pie',
                radius: ['10%', '50%'],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 4
                },
                // data: [
                //     { value: 40, name: '河北省' },
                //     { value: 38, name: '河南省' },
                //     { value: 32, name: '山西省' },
                //     { value: 30, name: '山东省' },
                //     { value: 28, name: '内蒙古' },
                //     { value: 26, name: '北京市' },
                //     { value: 22, name: '辽宁省' },
                //     { value: 18, name: '上海' }
                // ]
                data: pie
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
paiChaart()

// 折线图
function lineChaart(lineName, salary, trueSalary) {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init($('.line')[0]);

    // 指定图表的配置项和数据
    let option = {
        // 图例
        legend: {
            top: 20
        },

        // 鼠标进入显示
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        // 标题
        title: {

            text: '薪资 Salary'
        },

        // 工具箱
        // toolbox: {
        //     feature: {
        //         dataZoom: {
        //             yAxisIndex: 'none'
        //         },
        //         restore: {},
        //         saveAsImage: {}
        //     }
        // },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            // data: ['张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥']
            data: lineName
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '50%']
        },

        //缩放组件
        // type：inside内部缩放到x轴上通过鼠标滚动缩放
        // type：select配合工具箱使用
        // type：slider
        dataZoom: [
            {
                type: 'slider',
                start: 0,
                end: 10
            },
            {
                start: 0,
                end: 10
            }
        ],
        series: [
            {
                name: '期望薪资',
                type: 'line',
                symbol: 'none', //表示线上的标志
                smoot: true,//平滑曲线
                itemStyle: {
                    color: 'red'
                },


                // data: [8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000]
                data: salary
            },
            {
                name: '实际薪资',
                type: 'line',
                symbol: 'none', //表示线上的标志
                smoot: true,
                itemStyle: {
                    color: 'pink'
                },


                // data: [9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 13000]
                data: trueSalary
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
// lineChaart()

// 柱状图
function scoreChaart({ avgScore, group, lt60, gt60, gt80 }) {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init($('.barChart')[0]);

    // 指定图表的配置项和数据
    let option = {
        // 设置网格
        grid: {
            top: 30,
            bottom: 30,
            left: "7%",
            right: "7%"
        },

        // 鼠标进入显示
        tooltip: {
            // 鼠标放到柱子上方就触发  item只有放到柱子上才触发
            trigger: 'axis',
            //横向虚线
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },

        legend: {
            data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [
            {
                type: 'category',
                // data: ['1组', '2组', '3组', '4组', '5组', '6组', '7组'],
                data: group,

                //    设置阴影
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                max: 100,
                interval: 10,
                axisLabel: {
                    formatter: '{value} 分'
                }
            },
            {
                type: 'value',
                min: 0,
                max: 10,
                interval: 1,
                axisLabel: {
                    formatter: '{value} 人'
                }
            }
        ],
        series: [
            {
                name: '平均分',
                type: 'bar',
                barWidth: 15,
                //data: [83, 57, 90, 78, 66, 76, 77, 87, 69, 92, 88, 78]
                data: avgScore
            },
            {
                name: '不及格',
                type: 'bar',
                //设置与左右那个轴对齐
                yAxisIndex: 1,
                // 设置柱子宽度
                barWidth: 15,
                // data: [2, 1, 3, 4, 2, 5, 2, 2, 4, 1, 6, 2]
                data: lt60
            },
            {
                name: '60-80之间',
                type: 'bar',
                yAxisIndex: 1,
                barWidth: 15,
                // data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4]
                data: gt60
            }
            ,
            {
                name: '高于80分',
                type: 'bar',
                //设置与左右那个轴对齐
                yAxisIndex: 1,
                barWidth: 15,
                // data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4]
                data: gt80
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
// scoreChaart()


// 地图
function mapChaart(chinaGeoCoordMap, chinaDatas) {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init($('.map')[0]);


    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = chinaGeoCoordMap[dataItem[0].name];
            var toCoord = [116.4551, 40.2539];
            if (fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord,
                    value: dataItem[0].value
                }, {
                    coord: toCoord,
                }]);
            }
        }
        return res;
    };
    var series = [];
    [['北京市', chinaDatas]].forEach(function (item, i) {
        console.log(item)
        series.push({
            type: 'lines',
            zlevel: 2,
            effect: {
                show: true,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', //箭头图标
                symbolSize: 5, //图标大小
            },
            lineStyle: {
                normal: {
                    width: 1, //尾迹线条宽度
                    opacity: 1, //尾迹线条透明度
                    curveness: .3 //尾迹线条曲直度
                }
            },
            data: convertData(item[1])
        }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: { //涟漪特效
                period: 4, //动画时间，值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 4 //波纹圆环最大限制，值越大波纹越大
            },
            label: {
                normal: {
                    show: true,
                    position: 'right', //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: function (params) {//圆环显示文字
                        return params.data.name;
                    },
                    fontSize: 13
                },
                emphasis: {
                    show: true
                }
            },
            symbol: 'circle',
            symbolSize: function (val) {
                return 5 + val[2] * 5; //圆环大小
            },
            itemStyle: {
                normal: {
                    show: false,
                    color: '#f00'
                }
            },
            data: item[1].map(function (dataItem) {
                return {
                    name: dataItem[0].name,
                    value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                };
            }),
        },
            //被攻击点
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    period: 4,
                    brushType: 'stroke',
                    scale: 4
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        //offset:[5, 0],
                        color: '#0f0',
                        formatter: '{b}',
                        textStyle: {
                            color: "#0f0"
                        }
                    },
                    emphasis: {
                        show: true,
                        color: "#f60"
                    }
                },
                symbol: 'pin',
                symbolSize: 50,
                data: [{
                    name: item[0],
                    value: chinaGeoCoordMap[item[0]].concat([10]),
                }],
            }
        );
    });

    option = {
        title: {
            text: "去北京路线",
            textStyle: {
                color: "#fff"
            }
        },
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(166, 200, 76, 0.82)',
            borderColor: '#FFFFCC',
            showDelay: 0,
            hideDelay: 0,
            enterable: true,
            transitionDuration: 0,
            extraCssText: 'z-index:100',
            formatter: function (params, ticket, callback) {
                //根据业务自己拓展要显示的内容
                var res = "";
                var name = params.name;
                var value = params.value[params.seriesIndex + 1];
                res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
                return res;
            }
        },
        backgroundColor: "#013954",
        visualMap: { //图例值控制
            min: 0,
            max: 1,
            calculable: true,
            show: false,
            color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
            textStyle: {
                color: '#fff'
            }
        },
        geo: {
            map: 'china',
            zoom: 1.2,
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true, //是否允许缩放
            itemStyle: {
                normal: {
                    color: 'rgba(51, 69, 89, .5)', //地图背景色
                    borderColor: '#516a89', //省市边界线00fcff 516a89
                    borderWidth: 1
                },
                emphasis: {
                    color: 'rgba(37, 43, 61, .5)' //悬浮背景
                }
            }
        },
        series: series
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
// mapChaart()